<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容列表 - jQuery练习</title>
    <style>
        table {
            border-collapse: collapse;
        }

        table tr th, table tr td {
            border: 1px solid #666666;
            padding: 5px;
        }
    </style>
</head>
<body>
<p>
    <button id="all">全选</button>
    <button id="reverse">反选</button>
    <button id="cancel">取消</button>

    批量操作：
    <select>
        <option>--请选择操作--</option>
        <option>删除</option>
        <option>审核</option>
        <option>取消审核</option>
    </select>
    <button>提交</button>
</p>

<table>
    <thead>
    <tr>
        <th>#</th>
        <th>id</th>
        <th>标题</th>
        <th>审核</th>
        <th>时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>1001</td>
        <td>为什么二孩政策放开，生育率反而连年走低？</td>
        <td>未审核</td>
        <td>2020-11-21</td>
        <td>
            <button>删除</button>
            <button>审核</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>10005</td>
        <td>上海浦东医院4015人被隔离，全部核酸检测</td>
        <td>已审核</td>
        <td>2020-11-21</td>
        <td>
            <button>删除</button>
            <button>取消审核</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>10006</td>
        <td>中国主权债券历史性一幕！</td>
        <td>未审核</td>
        <td>2020-11-22</td>
        <td>
            <button>删除</button>
            <button>审核</button>
        </td>
    </tr>
    </tbody>
</table>
<script>

    // -----------------------------
    // 1. 表格显示操作
    // -----------------------------
    // 1. 鼠标移动到表格上每一行的时候，背景变更为灰色。

    // -----------------------------
    // 2. 全选、反选、取消按钮操作
    // -----------------------------
    // 2.1 点击全选按钮，则新闻列表表格首列的复选框会被全部选中
    // 2.2 点击反选按钮，则新闻列表表格首列的复选框选中的取消，没有选中的则选中
    // 2.3 点击取消按钮，则新闻列表表格首列的复选框会被全部取消选中

    // -----------------------------
    // 3. 删除、审核按钮操作
    // -----------------------------
    // 3.1 点击删除按钮，则提示：是否确认删除？如果确认删除，则移除本行。
    // 3.2 点击审核按钮，则提示：是否确认审核？如果确认审核，则审核列字眼变成：已审核。相关按钮变成：取消审核
    // 3.3 点击取消审核按钮，操作如上，只是功能相反。

    // -----------------------------
    // 4. 批量删除、审核、取消审核操作
    // -----------------------------
    // 4.1 功能如上面，只是可以根据选中的文章进行批量操作。
</script>
</body>
</html>